<template>
  <div class="ocr-recognition">
    <!-- 步骤指示器 -->
    <div class="steps-container">
      <div class="step" :class="{ active: currentStep >= 1, completed: currentStep > 1 }">
        <div class="step-circle">1</div>
        <span class="step-label">上传文件</span>
        <div class="step-line" v-if="currentStep > 1"></div>
      </div>
      <div class="step" :class="{ active: currentStep >= 2, completed: currentStep > 2 }">
        <div class="step-circle">2</div>
        <span class="step-label">在线识别</span>
        <div class="step-line" v-if="currentStep > 2"></div>
      </div>
      <div class="step" :class="{ active: currentStep >= 3 }">
        <div class="step-circle">3</div>
        <span class="step-label">导出结果</span>
      </div>
    </div>

    <!-- 主内容区域 -->
    <div class="main-content">
      <!-- 步骤1：上传文件 -->
      <div  class="upload-container">
        <div class="upload-area" @click="triggerFileInput" @dragover.prevent @drop.prevent="handleDrop">
          <div class="upload-icon">
            <svg viewBox="0 0 64 64" width="64" height="64" fill="none">
              <rect x="12" y="8" width="32" height="44" rx="2" stroke="#D1D5DB" stroke-width="2"/>
              <path d="M20 20h16M20 28h16M20 36h12" stroke="#D1D5DB" stroke-width="2"/>
              <path d="M44 24v24" stroke="#D1D5DB" stroke-width="2"/>
              <path d="M40 28l4-4 4 4" stroke="#D1D5DB" stroke-width="2"/>
            </svg>
          </div>
          <div class="upload-text">
            <h3>点击上传文件/拖拽文件到此处</h3>
            <p>支持png、jpg、jpeg、gif、tiff、webp、bmp格式的图片或PDF格式文件，单个文件大小不超过10M</p>
          </div>
        </div>
        <input 
          ref="fileInput" 
          type="file" 
          accept="image/png,image/jpg,image/jpeg,image/gif,image/tiff,image/webp,image/bmp,application/pdf" 
          @change="handleFileSelect"
          style="display: none"
        />
        
        <!-- 文件类型选择按钮 -->
        <div class="file-type-buttons">
          <button 
            class="file-type-btn" 
            :class="{ active: selectedFileType === 'mindmap' }"
            @click="selectFileType('mindmap')"
          >
            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
              <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
            </svg>
            脑图
          </button>
          <button 
            class="file-type-btn" 
            :class="{ active: selectedFileType === 'invoice' }"
            @click="selectFileType('invoice')"
          >
            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
              <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z"/>
              <path d="M14 2v6h6"/>
              <path d="M16 13H8"/>
              <path d="M16 17H8"/>
              <path d="M10 9H8"/>
            </svg>
            发票
          </button>
          <button 
            class="file-type-btn" 
            :class="{ active: selectedFileType === 'table' }"
            @click="selectFileType('table')"
          >
            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
              <path d="M3 3h18v18H3zM5 5v14h14V5H5z"/>
              <path d="M5 9h14M5 13h14M9 5v14M15 5v14"/>
            </svg>
            表格
          </button>
          <button 
            class="file-type-btn" 
            :class="{ active: selectedFileType === 'image' }"
            @click="selectFileType('image')"
          >
            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
              <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
              <circle cx="8.5" cy="8.5" r="1.5"/>
              <path d="M21 15l-5-5L5 21"/>
            </svg>
            图片
          </button>
        </div>
        
        <!-- 脑图说明信息 -->
        <div v-if="selectedFileType === 'mindmap'" class="file-type-description">
          <div class="description-content">
            <h4>脑图识别说明</h4>
            <p>上传思维导图/鱼骨图等类型，生成md文件，再导入到Xmind（2025版本）生成脑图</p>
          </div>
        </div>
      </div>

      <!-- 步骤2&3：识别和结果 -->
      <div  class="recognition-container">
        <div class="recognition-layout">
          <!-- 左侧：在线识别 -->
          <div class="recognition-left">
            <h3 class="section-title">在线识别</h3>
            <div class="recognition-status">
              <!-- 显示上传的文件 -->
              <div v-if="uploadedFile" class="uploaded-file-display">
                <div class="file-preview">
                  <img :src="filePreviewUrl" :alt="uploadedFile.name" class="file-image" />
                </div>
              <!--   <div class="file-info">
                  <div class="file-tab">
                    <div class="file-tab-icon">
                      <svg viewBox="0 0 24 24" width="16" height="16" fill="#4285f4">
                        <path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"/>
                      </svg>
                    </div>
                    <div class="file-tab-content">
                      <div class="file-tab-title">{{ uploadedFile.name.split('.')[0] }}</div>
                      <div class="file-tab-url">{{ uploadedFile.name }}</div>
                    </div>
                    <div class="file-tab-size">{{ formatFileSize(uploadedFile.size) }}</div>
                  </div>
                </div> -->
              </div>

              <!-- 识别状态 -->
              <div class="recognition-progress">
                <div v-if="isProcessing" class="processing">
                  <div class="loading-spinner"></div>
                  <p>正在识别中...</p>
                </div>
                <div v-else-if="hasError" class="error">
                  <div class="error-icon">✗</div>
                  <p>{{ errorMessage || '识别失败' }}</p>
                  <button class="retry-btn" @click="retryUpload">重试</button>
                </div>
                <div v-else-if="uploadedFile && recognitionResult" class="completed">
                  <div class="success-icon">✓</div>
                  <p>识别完成</p>
                </div>
                <div v-else class="waiting">
                  <p>等待上传文件...</p>
                </div>
              </div>
            </div>
          </div>

          <!-- 右侧：识别结果 -->
          <div class="recognition-right">
            <h3 class="section-title">识别结果</h3>
            <div class="result-area">
              <textarea 
                v-model="recognitionResult"
                placeholder="识别结果将显示在这里..."
                :readonly="isProcessing"
              ></textarea>
            </div>
          </div>
        </div>

        <!-- 底部操作区 -->
        <div class="bottom-actions">
          <div class="action-buttons">
            <button class="btn btn-copy" @click="copyResult">
              <svg viewBox="0 0 16 16" width="16" height="16">
                <path d="M4 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V2Zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H6ZM2 5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1h1v1a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1v1H2Z" fill="currentColor"/>
              </svg>
              复制
            </button>
            <button class="btn btn-export" @click="exportResult">
              <svg viewBox="0 0 16 16" width="16" height="16">
                <path d="M8.5 1.5A1.5 1.5 0 0 0 7 0H3.5A1.5 1.5 0 0 0 2 1.5v13A1.5 1.5 0 0 0 3.5 16h9a1.5 1.5 0 0 0 1.5-1.5V6.5a1.5 1.5 0 0 0-1.5-1.5h-4ZM3 1.5a.5.5 0 0 1 .5-.5H7v4.5A1.5 1.5 0 0 0 8.5 7h4.5v7.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5v-13Z" fill="currentColor"/>
              </svg>
              导出
            </button>
          </div>
          <p class="disclaimer">以上内容由AI模型生成，请您仔细核对，如有错误请及时修改</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onUnmounted } from 'vue'
import { ElMessage } from 'element-plus'
import { uploadOcr, ocrRecognition } from '@/api/ocrRecognition'

const currentStep = ref(1)
const fileInput = ref<HTMLInputElement>()
const recognitionResult = ref('')
const isProcessing = ref(false)
const uploadedFile = ref<File | null>(null)
const filePreviewUrl = ref('')
const hasError = ref(false)
const errorMessage = ref('')
const selectedFileType = ref<string>('')

// 选择文件类型
const selectFileType = (type: string) => {
  selectedFileType.value = type
  // 根据选择的类型可以调整文件上传的accept属性
  if (fileInput.value) {
    switch (type) {
      case 'mindmap':
        fileInput.value.accept = 'image/png,image/jpg,image/jpeg,image/gif,image/tiff,image/webp,image/bmp,application/pdf'
        break
      case 'invoice':
        fileInput.value.accept = 'image/png,image/jpg,image/jpeg,image/gif,image/tiff,image/webp,image/bmp,application/pdf'
        break
      case 'table':
        fileInput.value.accept = 'image/png,image/jpg,image/jpeg,image/gif,image/tiff,image/webp,image/bmp,application/pdf'
        break
      case 'image':
        fileInput.value.accept = 'image/png,image/jpg,image/jpeg,image/gif,image/tiff,image/webp,image/bmp'
        break
      default:
        fileInput.value.accept = 'image/png,image/jpg,image/jpeg,image/gif,image/tiff,image/webp,image/bmp,application/pdf'
    }
  }
}

// 触发文件选择
const triggerFileInput = () => {
  fileInput.value?.click()
}

// 处理文件选择
const handleFileSelect = (event: Event) => {
  const target = event.target as HTMLInputElement
  const file = target.files?.[0]
  if (file) {
    // FIX 选择同一文件不会触发 change，需清除隐藏的 input 元素
    target.value = ''
    // 清除之前的错误状态
    hasError.value = false
    errorMessage.value = ''
    handleFile(file)
  }
}

// 处理拖拽上传
const handleDrop = (event: DragEvent) => {
  const files = event.dataTransfer?.files
  if (files && files.length > 0) {
    // 清除之前的错误状态
    hasError.value = false
    errorMessage.value = ''
    handleFile(files[0])
  }
}

// 处理文件
const handleFile = async (file: File) => {
  // 验证文件类型
  const allowedTypes = ['image/png', 'image/jpg', 'image/jpeg', 'image/gif', 'image/tiff', 'image/webp', 'image/bmp', 'application/pdf']
  if (!allowedTypes.includes(file.type)) {
    ElMessage.error('请上传png、jpg、jpeg、gif、tiff、webp或bmp格式的图片或 PDF 文件')
    return
  }

  // 验证文件大小
  if (file.size > 10 * 1024 * 1024) {
    ElMessage.error('文件大小不能超过10M')
    return
  }

  // 重置状态
  recognitionResult.value = ''
  isProcessing.value = false
  hasError.value = false
  errorMessage.value = ''
  currentStep.value = 1

  // 保存文件信息并创建预览
  uploadedFile.value = file
  console.log('选择的文件:', file)

  // 创建文件预览URL
  if (filePreviewUrl.value) {
    URL.revokeObjectURL(filePreviewUrl.value)
  }
  filePreviewUrl.value = URL.createObjectURL(file)

  // 进入识别阶段
  currentStep.value = 2
  isProcessing.value = true

  // 创建FormData并上传文件
  const formData = new FormData();
  formData.append("file", file);
  formData.append("know_title", file.name);

  try {
    console.log('开始上传文件...')
    const file_info = await uploadOcr(formData)
    console.debug('上传响应:', file_info)

    // 检查响应状态
    // 拦截器以及处理过了，这里可以直接使用
    // if (response && response.code === 200) {
    ElMessage.success('文件上传成功，开始识别...')

    // 调用识别接口
    const recognitionResponse:any = await ocrRecognition({
      file_path: file_info.file_url
    })
    // 识别完成，设置状态
    isProcessing.value = false
    currentStep.value = 3
    ElMessage.success('识别完成')

    const show_file_info = [`文件名：${file_info.file_name}`, `文件大小：${(file.size / 1024).toFixed(2)} KB`, `文件类型：${file.type}`]

    recognitionResult.value = recognitionResponse?.output?.line_texts?.join('\n') + 
    '\n\n\n\n' + 
    '------文件信息------' + 
    '\n' + 
    show_file_info.join('\n')
    console.debug('识别响应:', recognitionResponse)
    
  } catch (error) {
    console.error('上传错误:', error)
    hasError.value = true
    errorMessage.value = '文件上传失败，请重试'
    isProcessing.value = false
  }

    // 模拟OCR识别过程
//     setTimeout(() => {
//       recognitionResult.value = `这是模拟的OCR识别结果。

// 实际项目中，这里会调用OCR API进行图片文字识别。
// 识别的文本内容会显示在这个区域。

// 文件名：${file.name}
// 文件大小：${(file.size / 1024).toFixed(2)} KB
// 识别时间：${new Date().toLocaleString()}`

//       isProcessing.value = false
//       currentStep.value = 3
//       ElMessage.success('识别完成')
//     }, 2000)
    // } else {
    //   throw new Error(response?.message || '上传失败')
    // }
  // } catch (error) {
  //   console.error('上传错误:', error)

  //   // 设置错误状态
  //   hasError.value = true
  //   errorMessage.value = '文件上传失败，请重试'
  //   isProcessing.value = false

  //   ElMessage.error('文件上传失败，请重试')

  //   // 不重置 uploadedFile 和 filePreviewUrl，让用户能看到失败的文件
  //   // 但可以点击重新上传
  // }
}

// 格式化文件大小
const formatFileSize = (bytes: number): string => {
  if (bytes === 0) return '0 B'
  const k = 1024
  const sizes = ['B', 'KB', 'MB', 'GB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i]
}

// 复制结果
const copyResult = async () => {
  try {
    await navigator.clipboard.writeText(recognitionResult.value)
    ElMessage.success('复制成功')
  } catch {
    ElMessage.error('复制失败')
  }
}

// 重试上传
const retryUpload = () => {
  if (uploadedFile.value) {
    handleFile(uploadedFile.value)
  }
}

// 导出结果
const exportResult = () => {
  const blob = new Blob([recognitionResult.value], { type: 'text/plain' })
  const url = URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = `OCR识别结果_${new Date().getTime()}.txt`
  a.click()
  URL.revokeObjectURL(url)
  ElMessage.success('导出成功')
}

// 组件卸载时清理资源
onUnmounted(() => {
  if (filePreviewUrl.value) {
    URL.revokeObjectURL(filePreviewUrl.value)
  }
})
</script>

<style scoped>
.ocr-recognition {
  height: 100%;
  background: #f8f9fa;
  padding: 2rem;
}

/* 步骤指示器 */
.steps-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.step {
  display: flex;
  align-items: center;
  position: relative;
  flex: 1;
  justify-content: center;
}

.step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 16px;
  left: calc(50% + 60px);
  right: calc(-50% + 60px);
  height: 2px;
  background: #e5e7eb;
  z-index: 1;
}

.step.completed:not(:last-child)::after {
  background: #6366f1;
}

.step-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #e5e7eb;
  color: #9ca3af;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  margin-right: 8px;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

.step.active .step-circle {
  background: #6366f1;
  color: white;
}

.step.completed .step-circle {
  background: #6366f1;
  color: white;
}

.step-label {
  font-size: 14px;
  color: #6b7280;
  font-weight: 500;
  position: relative;
  z-index: 2;
}

.step.active .step-label {
  color: #374151;
}

/* 上传区域 */
.upload-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  width: 100%;
  margin-top: 20px;
}

.upload-area {
  width: 100%;
  height: 250px;
  border: 2px dashed #d1d5db;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
  background: white;
}

.upload-area:hover {
  border-color: #6366f1;
  background: #f8faff;
}

.upload-icon {
  margin-bottom: 1rem;
  color: #9ca3af;
}

.upload-text h3 {
  font-size: 16px;
  color: #374151;
  margin-bottom: 8px;
  text-align: center;
}

.upload-text p {
  font-size: 14px;
  color: #6b7280;
  text-align: center;
  margin: 0;
}

/* 文件类型选择按钮 */
.file-type-buttons {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
}

.file-type-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  background: white;
  color: #6b7280;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 100px;
  justify-content: center;
}

.file-type-btn:hover {
  border-color: #6366f1;
  color: #6366f1;
  background: #f8faff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
}

.file-type-btn.active {
  border-color: #6366f1;
  background: #6366f1;
  color: white;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.file-type-btn svg {
  flex-shrink: 0;
}

/* 文件类型说明 */
.file-type-description {
  margin-top: 16px;
  padding: 16px;
  background: #f0f9ff;
  border: 1px solid #0ea5e9;
  border-radius: 8px;
  animation: fadeIn 0.3s ease;
}

.description-content h4 {
  margin: 0 0 8px 0;
  color: #0c4a6e;
  font-size: 16px;
  font-weight: 600;
}

.description-content p {
  margin: 0;
  color: #075985;
  font-size: 14px;
  line-height: 1.5;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 识别和结果区域 */
.recognition-container {
  margin: 0 auto;
}

.recognition-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}

.section-title {
  font-size: 16px;
  color: #374151;
  margin-bottom: 1rem;
  font-weight: 600;
}

.recognition-status {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid #f1f5f9;
}

.uploaded-file-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-align: center;
  width: 100%;
  flex: 1;
}

.file-preview {
  width: 240px;
  height: 180px;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f9fafb;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}

.file-preview:hover {
  transform: scale(1.02);
}

.file-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.file-info {
  width: 100%;
  max-width: 280px;
}

.file-tab {
  display: flex;
  align-items: center;
  background: white;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 8px 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.file-tab-icon {
  flex-shrink: 0;
  margin-right: 8px;
  display: flex;
  align-items: center;
}

.file-tab-content {
  flex: 1;
  min-width: 0;
  margin-right: 8px;
}

.file-tab-title {
  font-size: 13px;
  font-weight: 500;
  color: #1f2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.file-tab-url {
  font-size: 11px;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  margin-top: 2px;
}

.file-tab-size {
  flex-shrink: 0;
  font-size: 11px;
  color: #9ca3af;
  background: #f3f4f6;
  padding: 2px 6px;
  border-radius: 4px;
}

.recognition-progress {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex: 1;
  min-height: 120px;
  width: 100%;
}

.recognition-progress p {
  margin: 0;
  color: #6b7280;
  font-size: 14px;
  line-height: 1.5;
  width: 100%;
}



.loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid #e5e7eb;
  border-top: 4px solid #6366f1;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 16px auto;
  display: block;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.success-icon {
  width: 48px;
  height: 48px;
  background: #10b981;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin: 0 auto 16px auto;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.error-icon {
  width: 48px;
  height: 48px;
  background: #ef4444;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin: 0 auto 16px auto;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.retry-btn {
  background: #6366f1;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  margin: 16px auto 0 auto;
  display: block;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

.retry-btn:hover {
  background: #5856eb;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

/* 状态特定样式 */
.processing, .completed, .error, .waiting {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-align: center;
}

.result-area {
  background: white;
  border-radius: 8px;
  padding: 2rem;
  height: 300px;
}

.result-area textarea {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  resize: none;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
}

/* 底部操作区 */
.bottom-actions {
  text-align: center;
}

.shortcut-info {
  margin-bottom: 1rem;
}

.shortcut-badge {
  background: #f3f4f6;
  color: #6b7280;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 14px;
}

.action-buttons {
  display: flex;
  justify-content: end;
  gap: 1rem;
  margin-bottom: 1rem;
}

.btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-copy {
  background: #f3f4f6;
  color: #374151;
}

.btn-copy:hover {
  background: #e5e7eb;
}

.btn-export {
  background: #6366f1;
  color: white;
}

.btn-export:hover {
  background: #5856eb;
}

.disclaimer {
  font-size: 12px;
  color: #9ca3af;
  margin: 0;
  line-height: 1.4;
}
</style>


